<div class="all-product" id="all-product">
  {% if section.settings.heading != blank %}
  <h2 class="center">{{ section.settings.heading  }}</h2>
  {% endif %}
  <div class="swiper-father">
    <div class="swiper index-product-swiper">
      <div class="swiper-wrapper">
        {%- for block in section.blocks -%}
            <div class="swiper-slide" {{ block.shopify_attributes }}>
              {% if block.settings.reward != blank %}
                <div class="raward-all tenways-fietstest">{{ block.settings.reward }}</div>
              {% endif %}
              {% if block.settings.reward_1 != blank %}
                <div class="raward-all tenways-fietstest">
                  <picture>
                    <source media="(max-width: 990px)" srcset="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/rad.png?v=1678167513" width="50" height="64" />
                    <source media="(min-width: 991px)" srcset="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/rad.png?v=1678167513" width="90" height="116"/>
                    <img src="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/rad.png?v=1678167513" alt="tenways-fietstest" width="90" height="116" />
                  </picture>
                </div>
              {% endif %}
              <div class="product-content">
                {% if block.settings.name != blank %}
                 <div class="name"> 
                  {{ block.settings.name }}

                  {%- form 'localization', id: 'FooterCountryForm' -%}
                    {% if localization.country.currency.symbol contains '$' and localization.country.currency.symbol != blank %}
                       <span class="{{ block.settings.tag_us | capitalize   }}">{{ block.settings.tag_us }}</span>
                     {% elsif localization.country.iso_code == 'DE' %}  
                        {% if block.settings.tag_de !=blank %}
                        <span class="{{ block.settings.tag | capitalize  }}">{{ block.settings.tag_de }}</span>
                       {% endif %}      
                    {% else %}
                    {% if block.settings.tag !=blank %}
                      <span class="{{ block.settings.tag_us | capitalize  }}">{{ block.settings.tag }}</span>
                     {% endif %}
                    {% endif %}  
                 {%- endform -%}    

                 </div>
                {% endif %}
                {% if block.settings.text != blank %}
                  <div class="text">{{ block.settings.text }}</div>
                {% endif %}
              </div>
              {%- if block.settings.button_label != blank -%}         
              {%- form 'localization', id: 'FooterCountryForm' -%}
                 {% if localization.country.iso_code == 'US' and localization.country.currency.symbol != blank %}
                 <a{% if block.settings.button_link_us != blank %} href="{{ block.settings.button_link_us }}" {% endif %} class="no-underline"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                {% else %}
               <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="no-underline"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                {% endif %}
              {%- endform -%}        
              {% endif %}
              <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} gradient color-{{ block.settings.color_scheme }} global-media-settings {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if block.settings.height == 'adapt' and block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
          >
            {%- if block.settings.image != blank -%}
              <img
                srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | image_url: width: 535 }} 535w,{%- endif -%}
                  {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
                  {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | image_url: width: 1070 }} 1070w,{%- endif -%}
                  {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
                  {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
                src="{{ block.settings.image | image_url: width: 1500 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                alt="{{ block.settings.image.alt | escape }}"
                loading="lazy"
                width="{{ block.settings.image.width }}"
                height="{{ block.settings.image.height }}"
              >
            {%- else -%}
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
              </div>
              {%- if block.settings.button_label != blank -%}
              </a>
            {% endif %}
              <div class="bottom">
                {%- form 'localization', id: 'FooterCountryForm' -%}
                  {% if localization.country.currency.symbol contains '$' and localization.country.currency.symbol != blank %}
                      {%- if block.settings.button_label != blank -%}
                        <a{% if block.settings.button_link_us != blank %} href="{{ block.settings.button_link_us }}" {% else %} href="{{ block.settings.button_link }}" {% endif %} class="bg-button tenways-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                        {{ block.settings.button_label | escape }}
                        </a>
                      {%- endif -%}  
                      {%- if block.settings.button_link_1 != blank -%}
                        <a{% if block.settings.link_1_us != blank %} href="{{ block.settings.link_1_us }}" {% else %} href="{{ block.settings.button_link_1 }}" {% endif %} class="no-bg tenways-hover{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>
                        {{ block.settings.button_label_1 | escape }}{% render 'icon-explore' %}
                        </a>
                      {%- endif -%}   

                    {% else %}

                    {%- if block.settings.button_label != blank -%}
                      <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="bg-button tenways-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                      {{ block.settings.button_label | escape }}
                      </a>
                    {%- endif -%}  
                    {%- if block.settings.button_label_1 != blank -%}
                      <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="no-bg tenways-hover{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>
                      {{ block.settings.button_label_1 | escape }}{% render 'icon-explore' %}
                      </a>
                    {%- endif -%}   

                {% endif %}  
              {%- endform -%}  
              </div>
            </div>
        {%- endfor -%}
      </div>
      <div class="swiper-button-next">{% render 'swiper-button-next' %}</div>
      <div class="swiper-button-prev">{% render 'swiper-button-prev' %}</div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>



<script>
    var swiper = new Swiper(".index-product-swiper", {
      speed: 600,
      centeredSlides: true,
      observeParents:true,
      allowTouchMove: false,
      breakpoints: {
        990: {
          slidesPerView: 1,
          spaceBetween: 0,
          noSwiping: true,
          loop:false,
        },
        991: {
          slidesPerView: 1.9,
          spaceBetween: 10,
          loop:true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
              el: ".swiper-pagination",
              clickable: true,
           },
        },
    }
    });
</script>


  {% schema %}
    {
      "name": "Index product",
      "class": "index-product spaced-section spaced-section--full-width",
      "tag": "section",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
        "type": "checkbox",
        "id": "full_width",
        "label": "t:sections.video.settings.full_width.label",
        "default": false
       }
      ],
      "blocks": [
        {
          "type": "image",
          "name": "image",
          "settings": [
            {
              "type": "html",
              "id": "reward",
              "label": "Reward"
            },
            {
              "type": "text",
              "id": "reward_1",
              "label": "Reviews"
            },
            {
              "type": "html",
              "id": "name",
              "label": "Name"
            },
            {
              "type": "text",
              "id": "text",
              "label": "Text"
            },
            {
              "type": "text",
              "id": "tag",
              "label": "Tag"
            },
            {
              "type": "text",
              "id": "tag_de",
              "label": "Tag de"
            },
            {
              "type": "text",
              "id": "tag_us",
              "label": "Tag US"
            },
            {
              "type": "image_picker",
              "id": "image",
              "label": "Image"
            },
            {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
            "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
            },
            {
            "type": "url",
            "id": "button_link",
            "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
            },
            {
            "type": "url",
            "id": "button_link_us",
            "label": "button link us"
            },
            {
            "type": "text",
            "id": "button_label_1",
            "default": "Button label",
            "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
            "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
            },
            {
            "type": "url",
            "id": "button_link_1",
            "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
            },
            {
            "type": "url",
            "id": "link_1_us",
            "label": "link_1_us"
            },
            {
            "type": "select",
            "id": "height",
            "options": [
              {
                "value": "adapt",
                "label": "adapt"
              },
              {
                "value": "small",
                "label": "small"
              },
              {
                "value": "large",
                "label": "large"
              }
          ],
          "default": "adapt",
          "label": "adapt"
        }
          ]
        }
      ],
      "presets": [
        {
          "name": "Index product",
          "blocks": [
            {
              "type": "image"
            }, {
              "type": "image"
            }, {
              "type": "image"
            }
          ]
        }
      ]
    }
  {% endschema %}